<template>
    <view class="page">
		
		<view class="u-tips" v-if="data.length != 0">
			<view class="head-pic"><image :src="data.head_pic_text"></image></view>
			<view class="name">{{data.realname}}</view>
			<view>{{data.mobile}}</view>
		</view>
		<view class="u-tips" v-else><icon type="warn" size="30"/><view>暂无分享人</view></view>
		<view class="u-phone" v-if="isAllow">
			<input class="u-input" type="number" placeholder="请输入修改的分享人手机号码" v-model="mobile" maxlength="11">
			<text class="check" @tap="blur_input" >查看此人</text>
		</view>
		<button type="warn" class="u-confirm" :disabled="isConfirm" @tap="confirm" v-if="isAllow">提交</button>
    </view>
</template>

<script>
	import henglang from '@/common/common.js';
	
    export default {
        data() {
            return {
                mobile: '',
                data: [],
				isAllow: false,
				isConfirm: true
            };
        },
        methods: {
			confirm() {
				let that = this
				uni.showLoading()
				henglang.post('member/changeRetreatRelation',{mobile: that.mobile},true,function(res){
					uni.hideLoading()
					if (res.data.code == 0) {
						henglang.showToast(res.data.msg,3000);
						that.data = res.data.data
						console.log(JSON.stringify(res.data),'changeRetreatRelation')
						uni.hideKeyboard()
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/user/user_index'
							})
						},3000)
					} else {
						henglang.showToast(res.data.msg);
					}
				});
				
			},
			blur_input() {
				let that = this
				if (!henglang.checkPhone(that.mobile)) {
				    uni.showToast({
				        icon: 'none',
				        title: '请输入正确的手机号码'
				    });
					that.isConfirm = true
				    return;
				}
				uni.showToast({
					icon:'none',
					title:'正在查询...'
				})
				henglang.post('member/getRetreatInfo',{mobile: that.mobile},true,function(res){
					uni.hideToast();
					if(res.data.code == 0){
						that.data = res.data.data
						
						that.isConfirm = false
					}else{
						henglang.showToast(res.data.msg);
						that.isConfirm = true
					}
				})
			}
        },
        onShow() {
            this.data = uni.getStorageSync('userInfo').retreat_parent;
			if(uni.getStorageSync('userInfo').allow_modify_pid){
				this.isAllow = true
			}
        }
    }
</script> 

<style>
    .page {
        min-height: 100vh;
        background: #f5f5f5;
    }

    .u-input {
        background: #fff;
        padding: 10rpx;
		flex: 1;
    }
    .u-tips {
        padding: 40upx 0;
        text-align: center;
		font-size: 30upx;
    }
	.u-tips .head-pic{
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
	}
	.u-tips .head-pic image{
		width: 100%;
		height: 100%;
	}
	.u-confirm {
	    width: 90%;
	    margin: 60upx 0 0 5%;
	    border-radius: 100px;
	    background: #d71311;
	    color: #fff;
	    text-align: center;
	    padding: 30upx;
	    font-size: 38upx;
	}
	.name{
		margin-top: 20upx;
	}
	.u-phone{
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
	}
	.check{
		color: #fff;
		background: #f7ba43;
		display: block;
		height: 100%;
		padding: 10px 20rpx;
	}
</style>
